import React, { Component } from 'react';
import { Button, Input, Select } from '@icedesign/base';
import Api from '../../../../Api/Api';
import Ajax from '../../../../Ajax';
import PropTypes from 'prop-types';


export default class TableFilter extends Component {
  static displayName = 'TableFilter';

  static propTypes = {
    changeDataSource: PropTypes.func,
  };

  constructor(props) {
    super(props);
    this.state = {
      value: {},
      
    };
    
  }

  handleSubmit = () => {
    var url = Api.selectUser(this.state.value);
    // console.log(this.state.value, url);
    Ajax.get(url)
      .then((res) => {
        if (res.data.code) {
          this.props.changeDataSource(res.data.data, res.data.total)
        }
      })
  }

  handleInputOnChange = (values) => {
    var newStateValue = this.state.value;
    Object.assign(newStateValue, {"username": values})
    this.setState({
      value: newStateValue
    })
  }

  

  render() {
    
    return (
      <div style={styles.tableFilter}>
        <div style={styles.title}>权限管理</div>
        <div style={styles.filter}>
          <div style={styles.filterItem}>
            <span style={styles.filterLabel}>用户名称：</span>
            <Input 
              onChange={this.handleInputOnChange}
            />
          </div>
          <div style={styles.filterItem}>
            <span style={styles.filterLabel}>用户类型：</span>
            <Select style={{ width: '200px' }}
              onChange={this.handerSelectOnChange}
            >
              <Select.Option value="无要求">无要求</Select.Option>
              <Select.Option value="会员用户">会员用户</Select.Option>
              <Select.Option value="普通用户">普通用户</Select.Option>
            </Select>
          </div>
          
          <Button type="primary" style={styles.submitButton} onClick={this.handleSubmit}>
            查询
          </Button>
        </div>
      
      </div>
    );
  }
}

const styles = {
  tableFilter: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: '20px',
    marginBottom: '20px',
    background: '#fff',
  },
  title: {
    height: '20px',
    lineHeight: '20px',
    color: '#333',
    fontSize: '18px',
    fontWeight: 'bold',
    paddingLeft: '12px',
    borderLeft: '4px solid #666',
  },
  filter: {
    display: 'flex',
  },
  filterItem: {
    display: 'flex',
    alignItems: 'center',
    marginLeft: '20px',
  },
  filterLabel: {
    fontWeight: '500',
    color: '#999',
  },
  submitButton: {
    marginLeft: '20px',
  },
};
